<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>index</title>
<link href="resource/css/main.css" type="text/css" rel="stylesheet" />
<link href="resource/css/style.css" type="text/css" rel="stylesheet" />
<meta content="width=device-width,initial-scale=1" name="viewport">
<style>
ul,li{list-style:none;}

#tab{position:relative;}
#tab .tabList ul li{
	float:left;
	background:#fefefe;
	background:-moz-linear-gradient(top, #fefefe, #ededed);	
	background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed));
	background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
	border:1px solid #DDDDDD;
	border-top:none;
	border-left:none;
	padding:5px 0;
	width:33%;
	text-align:center;
	margin-left:0px;
	position:relative;
	cursor:pointer;
	font-size:14px;
}
#tab .tabCon{
	position:absolute;
	left:-1px;
	top:32px;
	border:1px solid #DDDDDD;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom:none;
	width:352px;
	height:208px;
	font-size:14px;
}
#tab .tabCon div{
	padding:10px;
	position:absolute;
	opacity:0;
	filter:alpha(opacity=0);
}
#tab .tabList li.cur{
	border-bottom:none;
	background:#fff;
	border-top:2px solid #00aeef;
}
#tab .tabCon div.cur{
	opacity:1;
	filter:alpha(opacity=100);
}
</style>
</head>

<body>
<div id="main">
    <div class="header">
       <div class="menu">
       		<div class="menu-left">
            	<ul>
                    <li><a href="#">LOGO</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">游戏</a></li>
                </ul>
            </div><!-- menu-left.end -->
            <div class="menu-center">
            	<input name="" type="text" placeholder="搜索" class="frm_input email" maxlength="32">
            </div><!-- menu-center -->
            <div class="menu-right">
            	<ul>
                    <li><a href="">登陆</a></li>
                    <li><a href="">注册</a></li>
                </ul>
            </div><!-- menu-right.end-->
       </div><!-- menu.end -->
    </div><!-- header.end -->
    
    <!-- 华丽的分割线 -->
    
    <div class="context">
    	<div class="context-left">
        	<div class="banner">
                <ul>
                    <li><img src="resource/images/a.png" /></li>
                    <li><img src="resource/images/b.png" /></li>
                    <li><img src="resource/images/c.png" /></li>
                </ul>
            </div>
        </div><!-- context-left.end-->
        <div class="context-center">
        	<div id="tab">
              <div class="tabList">
                <ul>
                    <li class="cur">最热</li>
                    <li>最新</li>
                    <li>学习</li>
                </ul>
              </div>
              <div class="tabCon">
                <div class="cur">断桥残雪、千百度、幻听、想象之中</div>
                <div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>
                <div>十年、K歌之王、浮夸</div>
              </div>
            </div>
        </div><!-- context-center.end -->
        <div class="context-right">
        	<div class="" style=" margin:10px 20px 10px 25px; height:220px;">
            	<div style="height:25px; float:left; width:70%"><span style="font-weight:300; font-size:16px;">官方公告</span></div>
                <div style="height:25px; float:left; width:29%; text-align:right;"><a href="#" style="text-decoration:none; font-size:12px; color:#999999; font-weight:100">查看全部</a></div>
            </div>
        </div><!-- context-right.end -->
    </div><!-- context.end -->
    
    <!-- 华丽的分割线 -->
    <div class="title" style="width:980px; height:120px; margin:0px auto;">
    	<div style="height:30px; line-height:30px; background-color:#EEEEEE; width:100%; border-left:4px solid #00aeef;">&nbsp;&nbsp;标题</div>
        <div>
        	
        </div>
    </div><!-- title.end -->
    
    
</div><!-- main.end -->
</body>
</html>
<!-- JS最后加载,提高网页的加载速度 -->
<script src="resource/js/jquery-1.9.0.js" type="text/javascript"></script>
<script src="resource/js/unslider.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	// banner
    $('.banner').unslider({
		speed: 600,
		delay: 3000,
		keys: true,
		dots: true,
		fluid: false
	});
	
	// tab
	var oDiv = document.getElementById("tab");
    var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");
    var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");
    var timer = null;
    for (var i = 0; i < oLi.length; i++) {
        oLi[i].index = i;
        oLi[i].onmouseover = function() {
            show(this.index);
        }
    }
    function show(a) {
        index = a;
        var alpha = 0;
        for (var j = 0; j < oLi.length; j++) {
            oLi[j].className = "";
            aCon[j].className = "";
            aCon[j].style.opacity = 0;
            aCon[j].style.filter = "alpha(opacity=0)";
        }
        oLi[index].className = "cur";
        clearInterval(timer);
        timer = setInterval(function() {
            alpha += 2;
            alpha > 100 && (alpha = 100);
            aCon[index].style.opacity = alpha / 100;
            aCon[index].style.filter = "alpha(opacity=" + alpha + ")";
            alpha == 100 && clearInterval(timer);
        },
        5)
    }
});

</script>